<template>
  <div>
    <div style="text-align: center;font-size: 18px;font-weight: bold">当前确诊人疫情传播链</div>
    <div id="myGraph" class="myGraph" ref="myGraph" style="width: 1000px; height: 700px"/>
  </div>
</template>

<script>

export default {
  name: "graph",
  // 父子组件传参
  props: {
    //传播链数据
    graphData:{},
  },
  data(){
    return{
      color: ["#c12e34",
        "#e6b600",
        "#0098d9",
        "#2b821d",
        "#005eaa",
        "#339ca8",
        "#cda819",
        "#32a487"],
      persons:{},

    }
  },
  created(){

  },
  watch:{
    graphData:{
      handler(newValue){
        this.persons=Object.assign({},newValue);
        this.$refs["myGraph"].removeAttribute("_echarts_instance_");
        this.initGraph(this.persons);
      },
    }
  },
  methods:{

    initGraph(person){
      var colors=["#00ADD0","#FFA12F","#B62AFF","#604BFF","#6E35FF","#002AFF","#20C0F4","#95F300","#04FDB8","#AF5AFF"]
      let getdata = getData(person);

      // 获取格式化后的数据
      function getData(person) {
        let arr=[];
        arr.push(person);
        arr=handleData(arr,0);
        return arr;
      }

      // 遍历并格式化数据，赋属性
      function handleData(data,index,color='#00f6ff'){
        //index标识第几层
        return data.map((item,index2)=>{
          //计算出颜色
          if(index==1){
            color = colors.find((item, eq) => eq == index2 % 10);
          }

          // 根据层级,设置label大小
          switch(index){
            case 0:
              item.symbolSize=110
              break;
            case 1:
              item.symbolSize=90
              break;
            case 2:
              item.symbolSize=70
              break;
            case 3:
              item.symbolSize=60
              break;
            default:
              item.symbolSize=40
              break;
          }
          // 设置线条颜色
          item.lineStyle= { color: color,width: 5 }
          //存在子节点，设置属性
          if (item.children.length>0) {
            item.itemStyle = {
              borderColor: color,
              color:color
            };
            //递归调用
            item.children=handleData(item.children,index+1,color);
            //不存在子节点
          } else {
            item.itemStyle = {
              color:'transparent',
              borderColor: color
            };
          }
          return item
        })
      }

      var option = {
        type: "tree",
        backgroundColor: "rgba(0,0,0,0)", //背景颜色
        toolbox: { //工具栏
          show: true,
          iconStyle: {
            borderColor: "#03ceda"
          },
          feature: {
            restore: {}
          }
        },
        tooltip: {//提示框
          trigger: "item",  //触发类型，默认：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）
          triggerOn: "mousemove", //提示框触发的条件，默认mousemove|click（鼠标点击和移动时触发）。可选mousemove：鼠标移动时，click：鼠标点击时，none：
          backgroundColor: "#fff",
          borderColor: "#cccccc",
          borderWidth: 1,
          textStyle: {
            fontSize: 20
          },
          formatter: function (params) {
            let color = "rgba(150,55,55,90)";
            let content = "<div style='width: 250px'>";
            content += "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:color;font-size: 18px;'>" + params.data.name + "</div>";
            content += "<div style='padding:3px;font-size: 12px;color: #333333'>";
            content += `<div>&bull;电话&nbsp;&nbsp;${params.data.phone}</div>`;
            content += `<div>&bull;身份证号&nbsp;&nbsp;${params.data.personId}</div>`;
            content += `<div>&bull;住所地址&nbsp;&nbsp;${params.data.address}</div>`;
            content += `<div>&bull;工作位置&nbsp;&nbsp;${params.data.workAddr}</div>`;
            content += "</div></div>"
            return content;
          }
        },
        series: [
          {
            type: "tree", //树形结构
            hoverAnimation: true, //hover样式
            data:getdata, //传入数据
            top: 0, //距离上的距离
            bottom: 0, //距离下的距离
            left: 90, //距离左的距离
            right: 0, //距离右的距离
            layout: "orthogonal", //正交布局
            zoom:0.9, //当前视角的缩放比例
            symbol: 'image://' + require('@/assets/images/dig.png'),  //图标
            nodePadding: 20,
            animationDurationUpdate: 500, //数据更新动画的时长，默认300
            expandAndCollapse: true, //子树折叠和展开的交互，默认打开
            initialTreeDepth: 50,
            roam: true, //是否开启鼠标缩放和平移漫游。scale/move/true
            focusNodeAdjacency: true,
            itemStyle: {
              borderWidth: 1,
            },
            label: { //每个节点所对应的标签的样式
              color: "#333333", //文字标签的颜色
              fontSize: 20, //文字标签的大小
              fontWeight: 'bold', //文字标签加粗
              fontFamily: 'SourceHanSansCN',  //文字样式
              position: 'bottom', //标签位置
              verticalAlign: 'middle',//文字垂直对齐方式，默认自动。可选：top，middle，bottom
              align: 'center',         //文字水平对齐方式，默认自动。可选：top，center，bottom
              rotate: 0,  //标签旋转角度
            },

            Style: {    //树图边的样式
              width: 1,     //树图边的宽度
              curveness:0.5,  //树图边的曲度
            }
          }
        ]
      };

      const chartObj = this.$echarts.init(this.$refs['myGraph']);
      chartObj.setOption(option);
    }
  },
  mounted(){

  }

}
</script>

<style scoped>

</style>
